<template>
  <dir class="map">
    <p class="title">
      <i></i>
      疫情地图
    </p>
    <the-tabs :currentIndex='currentIndex' @event='changeIndex'>
      <the-tab index='1' label='国内疫情'>
        <div id="chinaMap"></div>
      </the-tab>
      <the-tab index='2' label='国外疫情'>
        <div id="worldMap"></div>
      </the-tab>
    </the-tabs>
  </dir>
</template>

<script>
import api from '../api/index'
import axios from 'axios'
export default {
  data () {
    return {
      currentIndex: '1'
    }
  },
  methods: {
    changeIndex (index) {
      this.currentIndex = index
    }
  },
  mounted () {
    function getNcov () {
      return axios.get('/xiaoniu/data/data/bar/%E4%B8%AD%E5%9B%BD.json')
    }

    function getNcovaBroad () {
      return api.getWorld({
        key: 'b417fdb3af8a56ba42db3604c3d694d5'
      })
    }
    const that = this
    axios.all([getNcov(), getNcovaBroad()])
      .then(axios.spread(function (ncov, ncovaBroad) {
        // 两个请求现在都执行完成
        const { areas, data } = ncov.data
        const allCitys = []
        for (let i = 0; i < ncov.data.areas.length; i++) {
          const curConfigCount = data['现存确诊'][i] - data['治愈'][i] - data['死亡'][i]
          const temp = {
            name: areas[i],
            value: curConfigCount
          }
          allCitys.push(temp)
        }
        that.$charts.chinaMap('chinaMap', allCitys)

        const worldCitys = []
        const world = ncovaBroad.data.newslist
        for (let i = 0; i < world.length; i++) {
          const temp = {
            name: world[i].provinceName,
            value: world[i].currentConfirmedCount > 0 ? world[i].currentConfirmedCount : -world[i].currentConfirmedCount
          }
          worldCitys.push(temp)
        }
        that.$charts.worldMap('worldMap', worldCitys)
      }))
  }
}
</script>

<style lang='scss' scoped>
.map {
  .title {
    padding: 16px;
    font-size: 17px;
    i {
      display: inline-block;
      width: 4px;
      height: 16px;
      background: #4169e2;
      margin-right: 3px;
      vertical-align: middle;
    }
  }
  #chinaMap {
    width: 100%;
    height: 400px;
  }
  #worldMap{
    width:100vw;
    height:400px;
  }
}
</style>
